<template>
  <div class="com-container">
    <div class="com-chart" ref="template"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 初始化Charts
    this.initChart();
    // 获取数据
    this.getData();
    // 适配
    this.screenAdapter();
    window.addEventListener("resize", this.screenAdapter);
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  data() {
    return {
      // 图表的实例对象
      chartInstance: null,
      // 从服务器中获取的所有数据
      allData: null,
    };
  },
  methods: {
    async initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.template, "chalk");

      const initOption = {};
      this.chartInstance.setOption(initOption);
    },
    async getData() {
      // 获取地图的散点数据
      const { data: res } = await this.$http.get("map");
      this.allData = res;
      this.updateChart();
    },
    updateChart() {
      let dataOption = {};
      this.chartInstance.setOption(dataOption);
    },
    // 浏览器大小发生变化会调用此方法
    screenAdapter() {
      let adapterOption = {};
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
  },
};
</script>

<style></style>
